<!DOCTYPE html>
<html>
<%include html-head%>
<body>
	<div data-role="page" id="accountMgr">
		<%include page-header%>
		<div role="main" class="ui-content">
			<div class="ui-grid-a">
				<div class="ui-block-a" style="width: 300px">
					<ul data-role="listview" data-inset="true">
						<li data-icon="home"><a href="/">Home</a></li>
					</ul>
					<ul data-role="listview" data-inset="true">
						<li data-icon="plus"><a href="#" id="addAccount">Add Account</a></li>
					</ul>
					<div>
						<ul data-role="listview" data-inset="true" id="lvAccounts"
							data-filter="true">
							<li data-role="list-divider">
								<div data-role="controlgroup" data-type="horizontal"
									style="float: left;">
									<h3 id="navigatorHeader"><%=navigatorHeader%></h3>
								</div>
								<div data-role="controlgroup" data-type="horizontal"
									data-mini="true" style="float: right;">
									<a href="<%=nextPage%>" rel="external" id="nextPage"
										class="ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext">Icon
										only</a>
								</div>
							</li> <% if (typeof accounts !== 'string'){%>
							<%accounts.forEach(function(a){%>
							<li id="accountli"><a href="#" class="accountId"
								tag="<%=a%>"><%=a%><input type="hidden"
									value="<%=a%>"></input>
							</a></li> <% });} %>
						</ul>
					</div>
				</div>
				<br />
				<div class="ui-block-b" style="margin-left: 30px" id="rightBlock">
					<ul data-role="listview" data-inset="true" id="lvController">
						<li data-role="list-divider">
							<div data-role="controlgroup" data-type="horizontal"
								style="float: left;">
								<h3 id="accountName">Account: No selected account</h3>
							</div>
							<div data-role="controlgroup" data-type="horizontal"
								data-mini="true" style="float: right;">
								<a href="#" id="editGroup"
									class="ui-btn ui-corner-all ui-icon-edit ui-btn-icon-notext">Icon
									only</a> <a href="#" id="deleteGroup"
									class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext">Icon
									only</a>
							</div>
						</li>
						<li style="padding-top: 0; padding-bottom: 0;">
							<div data-role="fieldcontain" data-type="horizontal">
								<label for="textinput-id">ID:</label> <input type="text"
									name="textinput-id" id="textinput-id" placeholder="ID" value=""
									readonly>
							</div>
						</li>
						<li style="padding-top: 0; padding-bottom: 0;">
							<div data-role="fieldcontain" data-type="horizontal">
								<label for="textinput-password">Password:</label> <input type="text"
									name="textinput-password" id="textinput-password" placeholder="Password"
									value="" readonly>
							</div>
						</li>
						
					</ul>

				</div>
			</div>
		</div>
		<%include page-footer%>
		<script type="text/javascript" src="owjs/wAccountMgr.js"></script>
	</div>
</body>
</html>